import Text1 from '@/assets/text-1.png';
import Text2 from '@/assets/text-2.png';
import CarSwiper from '@/components/CarSwiper';
import useRoundDrag from '@/hooks/useRoundDrag';
import classNames from 'classnames';
import { useState } from 'react';

import '@animxyz/core';
import { XyzTransitionGroup } from '@animxyz/react';

import ArrowIcon from '@/assets/arr-1.png';
import End from '@/components/End';

const TotalFrames = 80; // ?总计多少帧
const images = [] as string[];
for (let i = 1; i <= TotalFrames; i++) {
  images.push(`/car/${i}.png?v=1.0.0`);
}

export default function () {
  const [progress, setProgress] = useState<number>(1);
  const { renderNode: renderRoundDragNode } = useRoundDrag({
    total: TotalFrames,
    progress: progress,
    label: (
      <>
        滑动启幕
        <br />
        感受跃马流韵
      </>
    ),
    onSetProgress: function (value: number) {
      setProgress(value);
    },
  });

  return (
    <section className="bg-black overflow-hidden">
      <div className=" min-h-[90vh] relative">
        <div className=" relative aspect-[1/1.35] overflow-hidden bg-black">
          {images.map((path: string, index: number) => (
            <img
              key={path}
              src={path}
              className={classNames(
                'absolute left-0 top-0 w-full h-full object-contain transition-all',
                {
                  block: index + 1 === progress,
                  hidden: index + 1 !== progress,
                },
              )}
            />
          ))}
        </div>

        <XyzTransitionGroup
          duration="auto"
          appear
          appearVisible
          xyz="fade down-100% stagger-2 delay-3"
        >
          <div className=" flex items-center justify-center -mt-[200px] relative z-10">
            {renderRoundDragNode()}
          </div>
          <b className="block w-[100px] h-[2px] bg-[#ff000b] mx-auto relative mt-8 z-20"></b>
          <div
            className="w-[450px] h-[74px] relative z-20 mx-auto mt-10"
            style={{
              backgroundImage: `url(${Text2})`,
              backgroundSize: '100% 100%',
            }}
          ></div>

          <div
            className="w-[432px] h-[44px] relative z-20 mx-auto mt-4"
            style={{
              backgroundImage: `url(${Text1})`,
              backgroundSize: '100% 100%',
            }}
          ></div>
          <b
            className="w-[34px] h-[18px] block mx-auto mt-6"
            style={{
              backgroundImage: `url(${ArrowIcon})`,
              backgroundSize: '100% 100%',
            }}
          ></b>
        </XyzTransitionGroup>
      </div>

      <CarSwiper />

      <End />
    </section>
  );
}
